<script setup lang="ts">
import { h } from "vue";
import {
	AppstoreAddOutlined,
	CaretRightOutlined,
	CopyOutlined,
	DeleteOutlined,
	FilterOutlined,
	PauseOutlined,
	SearchOutlined,
} from "@ant-design/icons-vue";
import { HomeCardProps } from "@/views/home/components/cards/types.ts";
import { useCard } from "@/views/home/components/cards/hooks.tsx";
import HomeDrawerView from "@/views/home/components/drawer/index.vue";
import HomeCardAliasView from "@/views/home/components/cards/alias.vue";
import HomeAddAliasView from "@/views/home/components/addAlias/index.vue";
import HomeTransferIndexView from "@/views/home/components/transferIndex/index.vue";

defineOptions({
	name: "HomeCardView",
});

const props = withDefaults(defineProps<HomeCardProps>(), {
	cardWidth: "0px",
	esIndexInfo: undefined,
});
const emit = defineEmits(["deleteIndex", "checkboxChange"]);

const {
	statusCircleInner,
	statusCircleFill,
	cardWidth,
	esIndexInfo,
	updateIndexInfoStatus,
	openDrawer,
	checked,
	showDrawer,
	handleDrawerClose,
	updateIndexInfo,
	handleDeleteAlias,
	handleAddAlias,
	handleCloseIndex,
	handleOpenIndex,
	handleDeleteIndex,
	handleCopy,
	checkboxChange,
} = useCard(props, emit);
</script>

<template>
	<div class="home-card-view" v-if="esIndexInfo">
		<a-card :style="{ width: cardWidth, height: '100%' }" :class="{ 'index-close': esIndexInfo.status == 'close' }">
			<div class="home-card-header">
				<a-checkbox :checked="esIndexInfo.select == true" @change="checkboxChange" />
				<div class="index-name" @click="showDrawer()">
					{{ esIndexInfo.index }}
				</div>
				<div class="index-copy">
					<a-button type="dashed" size="small" @click="handleCopy(esIndexInfo.index)" :icon="h(CopyOutlined)" />
				</div>
			</div>
			<div class="home-card-body">
				<div class="index-alias-info">
					<home-card-alias-view
						:index="esIndexInfo.index"
						:update-index-alias="updateIndexInfoStatus"
						:single-row="true"
						:close="esIndexInfo.status == 'close'"
						@delete-alias="handleDeleteAlias"
					/>
				</div>
				<div class="index-alias-add">
					<home-add-alias-view :index="esIndexInfo.index" :close="esIndexInfo.status == 'close'" @add-alias="handleAddAlias" />
					<div class="home-card-info">
						<a-tag color="blue" v-if="esIndexInfo['store.size']">Size: {{ esIndexInfo["store.size"] }}</a-tag>
						<a-tag color="cyan" v-if="esIndexInfo['docs.count']">Docs: {{ esIndexInfo["docs.count"] }}</a-tag>
					</div>
				</div>
			</div>
			<div class="home-card-footer">
				<div class="status">
					<a-tooltip :title="esIndexInfo.status" :color="esIndexInfo.status == 'open' ? 'green' : 'gold'" placement="bottom">
						<a-tag :color="esIndexInfo.status == 'open' ? 'success' : 'red'" :bordered="false" :icon="statusCircleInner" />
					</a-tooltip>
					<a-tooltip :title="esIndexInfo.health" :color="esIndexInfo.health == 'green' ? 'green' : 'gold'" placement="bottom">
						<a-tag :color="esIndexInfo.health == 'green' ? 'green' : 'red'" :bordered="false" :icon="statusCircleFill" />
					</a-tooltip>
				</div>
				<div class="home-card-action">
					<a-tooltip title="数据预览" color="orange" placement="bottom">
						<a-button type="text" size="small" :icon="h(AppstoreAddOutlined)" shape="circle" />
					</a-tooltip>
					<a-tooltip title="基础查询" color="orange" placement="bottom">
						<a-button type="text" size="small" :icon="h(SearchOutlined)" shape="circle" />
					</a-tooltip>
					<a-tooltip title="高级查询" color="orange" placement="bottom">
						<a-button type="text" size="small" :icon="h(FilterOutlined)" shape="circle" />
					</a-tooltip>

					<home-transfer-index-view :index="esIndexInfo.index" :disabled="esIndexInfo.status == 'close'" />
					<a-tooltip title="打开索引" color="orange" placement="bottom">
						<a-popconfirm
							title="是否打开此索引?"
							ok-text="是"
							cancel-text="否"
							:disabled="esIndexInfo.status == 'open'"
							@confirm="handleOpenIndex(esIndexInfo.index)"
						>
							<a-button type="text" size="small" :icon="h(CaretRightOutlined)" shape="circle" :disabled="esIndexInfo.status == 'open'" />
						</a-popconfirm>
					</a-tooltip>
					<a-tooltip title="关闭索引" color="orange" placement="bottom">
						<a-popconfirm
							title="是否关闭此索引?"
							ok-text="是"
							cancel-text="否"
							@confirm="handleCloseIndex(esIndexInfo.index)"
							:disabled="esIndexInfo.status == 'close'"
						>
							<a-button type="text" size="small" :icon="h(PauseOutlined)" shape="circle" :disabled="esIndexInfo.status == 'close'" />
						</a-popconfirm>
					</a-tooltip>
					<a-tooltip title="删除索引" color="orange" placement="bottom">
						<a-popconfirm title="是否删除此索引?" ok-text="是" cancel-text="否" @confirm="handleDeleteIndex(esIndexInfo.index)">
							<a-button type="text" size="small" :icon="h(DeleteOutlined)" shape="circle" />
						</a-popconfirm>
					</a-tooltip>
				</div>
			</div>
		</a-card>
		<home-drawer-view
			:index="esIndexInfo.index"
			:open-drawer="openDrawer"
			@handle-close="handleDrawerClose"
			:es-index-info="esIndexInfo"
			@update-index-info="updateIndexInfo"
		/>
	</div>
</template>

<style scoped lang="scss">
.ant-card {
	box-shadow:
		0 1px 2px 0 rgba(0, 0, 0, 0.03),
		0 1px 6px -1px rgba(0, 0, 0, 0.02),
		0 2px 4px 0 rgba(0, 0, 0, 0.02);
}

.home-card-view .index-close {
	background-color: var(--home-card-index-close-bg);
}

.home-card-header {
	display: flex;
	flex-direction: row;
	gap: 10px;
	justify-content: space-between;
}

.index-name {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: bold;
	font-size: 15px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.index-name:hover {
	color: var(--card-index-name-hover-color);
}

.index-alias-info {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.home-card-body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	margin-top: 6px;
	width: 100%;
	flex: 1;
}

.index-alias-add {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.home-card-footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-top: 13px;
	padding-top: 10px;
	border-top: 1px solid var(--home-card-footer-border-color);
}

.home-card-info {
	display: flex;
	flex-direction: row;
	gap: 10px;
	margin-right: 15px;
}

.home-card-action {
	display: flex;
	flex-direction: row;
	gap: 10px;
}
</style>
